<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇:新世界 - 多模式游戏体验</title>
    
    <!-- Bootstrap CSS -->
    <link href="../plugin/bootstrap-5.3.8-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="../plugin/bootstrap-icons-1.13.1/font/bootstrap-icons.css" rel="stylesheet">
    <!-- 游戏主页自定义CSS -->
    <link href="css/game-home.css" rel="stylesheet">
</head>
<body class="game-home-body">
    <!-- 游戏网格背景 -->
    <div class="game-grid-bg"></div>
    
    <!-- 游戏头部 -->
    <header class="game-header py-3">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="game-title mb-0">
                        <i class="bi bi-controller me-2"></i>
                        贪吃蛇:新世界
                    </h1>
                </div>
                <div class="col-md-6 text-md-end">
                    <div class="d-flex justify-content-md-end align-items-center gap-3">
                        <button class="btn btn-outline-light btn-sm">
                            <i class="bi bi-gear me-1"></i>设置
                        </button>
                        <button class="btn btn-outline-warning btn-sm">
                            <i class="bi bi-question-circle me-1"></i>帮助
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="container py-5">
        <!-- 游戏控制面板 -->
        <div class="game-control-panel p-4 mb-5">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h3 class="text-white mb-2">游戏控制台</h3>
                    <p class="text-light mb-0">
                        <span class="selected-mode text-warning">经典模式</span> 
                        <span class="mode-description">- 传统贪吃蛇玩法，挑战最高分数</span>
                    </p>
                </div>
                <div class="col-md-4 text-md-end">
                    <button class="game-btn me-2">
                        <i class="bi bi-play-fill me-2"></i>快速开始
                    </button>
                    <button class="btn btn-outline-light me-2">
                        <i class="bi bi-shuffle me-1"></i>随机模式
                    </button>
                    <button class="btn btn-outline-warning me-2" onclick="location.href='editor.html'">
                        <i class="bi bi-map me-1"></i>地图编辑器
                    </button>
                    <button class="btn btn-outline-info">
                        <i class="bi bi-trophy me-1"></i>成就页面
                    </button>
                </div>
            </div>
        </div>

        <!-- 游戏统计信息 -->
        <div class="row mb-5">
            <div class="col-12">
                <h3 class="text-white mb-4 text-center">游戏统计</h3>
                <div class="row">
                    <div class="col-md-3 col-6 mb-3">
                        <div class="game-stats">
                            <div class="stat-item">
                                <div class="stat-value" id="total-games">0</div>
                                <div class="stat-label">总游戏次数</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-6 mb-3">
                        <div class="game-stats">
                            <div class="stat-item">
                                <div class="stat-value" id="high-score">0</div>
                                <div class="stat-label">最高分数</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-6 mb-3">
                        <div class="game-stats">
                            <div class="stat-item">
                                <div class="stat-value" id="total-time">0:00</div>
                                <div class="stat-label">游戏时长</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-6 mb-3">
                        <div class="game-stats">
                            <div class="stat-item">
                                <div class="stat-value" id="achievements">0</div>
                                <div class="stat-label">成就数量</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 重置数据按钮 -->
                <div class="text-center mt-4">
                    <button class="btn btn-outline-warning btn-sm" id="reset-stats-btn" onclick="window.gameStats.resetStats()">
                        <i class="bi bi-arrow-clockwise me-1"></i>重置统计数据
                    </button>
                </div>
            </div>
        </div>

        <!-- 游戏模式选择 -->
        <div class="row">
            <div class="col-12">
                <h3 class="text-white mb-4 text-center">选择游戏模式</h3>
                <p class="text-light text-center mb-5">四种精彩模式，带给你不同的游戏体验</p>
                
                <div class="row g-4">
                    <!-- 经典模式 -->
                    <div class="col-xl-3 col-lg-6">
                        <div class="game-mode-card p-4 h-100" data-mode="classic">
                            <div class="mode-icon bg-primary">
                                <i class="bi bi-star-fill"></i>
                            </div>
                            <h4 class="card-title text-white text-center mb-3">经典模式</h4>
                            <p class="card-text text-light text-center mb-4">
                                传统贪吃蛇玩法，在有限空间内移动吃食物，挑战最高分数记录！
                            </p>
                            <div class="text-center">
                                <button class="game-btn start-game-btn">
                                    <i class="bi bi-play-fill me-2"></i>开始游戏
                                </button>
                            </div>
                            <div class="mt-3 text-center">
                                <small class="text-white">快捷键: <kbd>1</kbd></small>
                            </div>
                        </div>
                    </div>

                    <!-- 闯关模式 -->
                    <div class="col-xl-3 col-lg-6">
                        <div class="game-mode-card p-4 h-100" data-mode="adventure">
                            <div class="mode-icon bg-secondary">
                                <i class="bi bi-flag-fill"></i>
                            </div>
                            <h4 class="card-title text-white text-center mb-3">闯关模式</h4>
                            <p class="card-text text-light text-center mb-4">
                                20个精心设计的关卡，障碍物逐渐复杂，考验你的策略和操作！
                            </p>
                            <div class="text-center">
                                <button class="game-btn start-game-btn" disabled>
                                    <i class="bi bi-clock me-2"></i>敬请期待
                                </button>
                            </div>
                            <div class="mt-3 text-center">
                                <small class="text-white">快捷键: <kbd>2</kbd></small>
                            </div>
                        </div>
                    </div>

                    <!-- 对决模式 -->
                    <div class="col-xl-3 col-lg-6">
                        <div class="game-mode-card p-4 h-100" data-mode="versus">
                            <div class="mode-icon bg-danger">
                                <i class="bi bi-people-fill"></i>
                            </div>
                            <h4 class="card-title text-white text-center mb-3">对决模式</h4>
                            <p class="card-text text-light text-center mb-4">
                                与AI进行激烈对战，看谁能活到最后或长度更长！
                            </p>
                            <div class="text-center">
                                <button class="game-btn start-game-btn" onclick="location.href='duel-choose.html'">
                                    <i class="bi bi-play-fill me-2"></i>开始对决
                                </button>
                            </div>
                            <div class="mt-3 text-center">
                                <small class="text-white">快捷键: <kbd>3</kbd></small>
                            </div>
                        </div>
                    </div>

                    <!-- BOSS战模式 -->
                    <div class="col-xl-3 col-lg-6">
                        <div class="game-mode-card p-4 h-100" data-mode="boss">
                            <div class="mode-icon bg-info">
                                <i class="bi bi-shield-fill"></i>
                            </div>
                            <h4 class="card-title text-white text-center mb-3">BOSS战模式</h4>
                            <p class="card-text text-light text-center mb-4">
                                挑战强大的BOSS，通过特殊食物获得攻击能力，躲避弹幕攻击！
                            </p>
                            <div class="text-center">
                                <button class="game-btn start-game-btn" onclick="location.href='boss-choose.html'">
                                    <i class="bi bi-play-fill me-2"></i>挑战BOSS
                                </button>
                            </div>
                            <div class="mt-3 text-center">
                                <small class="text-white">快捷键: <kbd>4</kbd></small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 游戏特色介绍 -->
        <div class="row mt-5">
            <div class="col-12">
                <div class="game-control-panel p-5">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <h3 class="text-white mb-3">游戏特色</h3>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-graph-up text-warning me-3 fs-4"></i>
                                        <div>
                                            <h5 class="text-white mb-1">实时统计</h5>
                                            <p class="text-light mb-0 small">详细记录游戏数据，追踪你的进步</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-trophy text-warning me-3 fs-4"></i>
                                        <div>
                                            <h5 class="text-white mb-1">成就系统</h5>
                                            <p class="text-light mb-0 small">完成挑战解锁成就，展示你的实力</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-keyboard text-warning me-3 fs-4"></i>
                                        <div>
                                            <h5 class="text-white mb-1">快捷键支持</h5>
                                            <p class="text-light mb-0 small">键盘快捷键快速开始游戏</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-phone text-warning me-3 fs-4"></i>
                                        <div>
                                            <h5 class="text-white mb-1">响应式设计</h5>
                                            <p class="text-light mb-0 small">完美适配各种设备屏幕</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-map text-warning me-3 fs-4"></i>
                                        <div>
                                            <h5 class="text-white mb-1">地图编辑器</h5>
                                            <p class="text-light mb-0 small">自定义游戏地图，创造独特关卡</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-trophy text-warning me-3 fs-4"></i>
                                        <div>
                                            <h5 class="text-white mb-1">成就系统</h5>
                                            <p class="text-light mb-0 small">解锁成就，展示你的游戏实力</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 text-center">
                            <i class="bi bi-joystick display-1 text-warning snake-animation"></i>
                            <p class="text-light mt-3">准备好开始游戏了吗？</p>
                            <button class="game-btn">
                                <i class="bi bi-lightning-fill me-2"></i>立即开始
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-light py-4 mt-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <p class="mb-0">
                        <i class="bi bi-controller me-2"></i>
                        贪吃蛇:新世界 © 2024
                    </p>
                </div>
                <div class="col-md-6 text-md-end">
                    <div class="d-flex justify-content-md-end gap-3">
                        <a href="#" class="text-light"><i class="bi bi-github"></i></a>
                        <a href="#" class="text-light"><i class="bi bi-twitter"></i></a>
                        <a href="#" class="text-light"><i class="bi bi-discord"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="../plugin/bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="../plugin/jquery-3.7.1.min.js"></script>
    <!-- 游戏统计管理器 -->
    <script src="js/data/game-stats.js"></script>
    <!-- 游戏主页自定义JS -->
    <script src="js/game-home.js"></script>
</body>
</html>